
<style scoped>

/* 轮播图 */
.el-carousel__item h3 {
  display: flex;
  color: #475669;
  opacity: 0.75;
  line-height: 300px;
  margin: 0;
}
.demo-tabs > .el-tabs__content {
  padding: 32px;
  color: #6b778c;
  font-size: 32px;
  font-weight: 600;
}
.demo-tabs .custom-tabs-label .el-icon {
  vertical-align: middle;
}
.demo-tabs .custom-tabs-label span {
  vertical-align: middle;
  margin-left: 4px;
}
.body-content{
  width: 100%;
  height: 100vh;
}
</style>


<template>
  <!--顶部 start-->
  <TopHeader/>
  <div style="height: 100vh">
    <el-tabs type="border-card" class="demo-tabs">
      <el-tab-pane>
        <template #label>
        <span class="custom-tabs-label">
          <el-icon><calendar /></el-icon>
          <span>报名信息</span>
        </span>
        </template>
        <div class="body-content">
          <el-table :data="queryEntryList" style="width: 100%" max-height="250">

            <el-table-column  label="报名课程"  >
              <template #default="scope">
                {{dictStatus(dict.dict2,scope.row.courseId)}}
              </template>
            </el-table-column>
            <el-table-column fixed prop="createTime" label="报名时间" width="250" >
              <template #default="scope">
                {{dataTime(scope.row.createTime)}}
              </template>
            </el-table-column>
            <el-table-column prop="realName" label="报名人"  />
            <el-table-column prop="city" label="报名状态"  >
              <template #default="scope">
                <el-tag
                    :type="scope.row.status === '6' ? 'success'
                :(scope.row.status === '2'? 'warning'
                :(scope.row.status === '3'? 'danger': ''))"
                    disable-transitions
                >{{ dictStatus(dict.dict3,scope.row.status)}}
                </el-tag>
              </template>
            </el-table-column>
            <el-table-column prop="checkRemake" width="300"  label="审核备注"  >
              <template #default="scope">
                <div v-if="scope.row.status==='3'">
                   {{dictStatus(dict.dict4,scope.row.checkRemake)}}
                </div>
                <div v-else>{{scope.row.checkRemake}}</div>
              </template>
            </el-table-column>
            <el-table-column fixed="right" label="操作" width="160">
              <template #default="scope">
                <el-button
                    type="danger"
                    size="small"
                    @click.prevent="deleteRow(scope.row)">
                  删除
                </el-button>
                <el-button
                    type="success"
                    size="small"
                    @click.prevent="entryBtn(scope.row)">
                  编辑
                </el-button>
              </template>
            </el-table-column>
          </el-table>
          <div v-if="userEntryShow">
            <user-entry-dialog :item-info="userEntryItem" @receive-user-entry="receiveUserEntryFun"></user-entry-dialog>
          </div>
        </div>
      </el-tab-pane>
      <el-tab-pane label="学习课程">
        <div class="body-content">
          学习课程
        </div>
      </el-tab-pane>
      <el-tab-pane label="账户信息">
        <div class="body-content">
          账户信息
        </div>
      </el-tab-pane>
      <el-tab-pane label="系统设置">
        <div class="body-content">
          系统设置
        </div>
      </el-tab-pane>
    </el-tabs>
  </div>
  <Footer/>
</template>

<script setup lang="ts">

import TopHeader from "@/views/edu/comm/TopHeader.vue"
import Footer from "@/views/edu/comm/Footer.vue"
import {onMounted, ref} from "vue";
import {queryEntry} from "@/api/edu/entryApi";
import { Calendar } from '@element-plus/icons-vue'
import moment from "moment";
import {postQueryStatus} from "@/api/edu/dictApi";
import {dictStatus, msg} from "@/config/Tool";
import UserEntryDialog from "@/components/userEntryDialog.vue";
import {ElMessage, UploadProps} from "element-plus";
const dict = ref({
  dict2:[],
  dict3:[],
  dict4:[],
  dict5:[],
})
const userEntryItem = ref({});
const userEntryShow = ref(false);
const queryEntryList = ref([]);





onMounted(()=>{
  postQueryStatusFun([2,3,4,5])
  queryEntryFun();
})


function dataTime(time:any){
  return moment(time).format('YYYY-MM-DD HH:mm:ss')
}



/**------------------------调用接口--------------------------*/

/**
 * 查询报名信息
 */
function queryEntryFun(){
  queryEntry({}).then((res)=>{
    queryEntryList.value = res.data;
  })
}

/**
 * 查询字典
 */
function postQueryStatusFun(e:any){
  e.forEach((item:any)=>{
    postQueryStatus({type:item}).then((res)=>{
      console.log(item,res.data)
      switch (item){
        case 2:
          dict.value.dict2=res.data;
          break;
        case 3:
          dict.value.dict3=res.data;
          break;
        case 4:
          dict.value.dict4=res.data;
          break;
        case 5:
          dict.value.dict5=res.data;
          break;
        default:
          break;
      }
    })
  })
}

/**
 * 删除报名信息
 */
function deleteRow(e:any){

}

/**
 * 点击编辑审核
 */
function entryBtn(e:any){
  console.log(e)
  userEntryItem.value = e;
  userEntryShow.value =true;
}

/**
 * 模态返回信息
 */
function receiveUserEntryFun(e:any){
  userEntryShow.value =false;
}






/**
 * 图片上传之前校验类型
 * @param rawFile
 */
const beforeAvatarUpload: UploadProps['beforeUpload'] = (rawFile) => {
  if (rawFile.type !== 'image/jpeg') {
    ElMessage.error('Avatar picture must be JPG format!')
    return false
  } else if (rawFile.size / 1024 / 1024 > 2) {
    ElMessage.error('Avatar picture size can not exceed 2MB!')
    return false
  }
  return true
}


</script>


